<template>
    <div>
        <el-card class="box-card">
            <div style="line-height: 31px;">
                <area-component
                  @areaObj='areaObj'
                  :province="sheng"
                  :city="shi"
                  :county="qu"
                ></area-component>
                <el-form inline label-width="80px" style="display: inline-block;">
                  <el-form-item label="学段">
                    <el-select v-model="phaseStudyId" placeholder="请选择学段">
                      <el-option value="" label="全部">全部</el-option>
                        <el-option
                        v-for="item in stageData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="学校名称">
                      <el-input v-model.trim="schoolName" placeholder="请输入学校名称"></el-input>
                  </el-form-item>
                </el-form>
                <el-button  type="primary" icon="el-icon-search" @click="searchList(1)">查询</el-button>
                <div>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="handleAdd">创建学校</el-button>
                    <el-button type="primary" @click="searchList(2)">导出列表</el-button>
                </div>
            </div>
            <div class="right-main">
            <cvue-table
              :option="tableOption"
              :data="tableData"
              ref="tbl1"
              :isShowAdd="false"
              :page="page"
              :tablePage="tablePage"
              :pageSize="page.pageSize"
              :loading="tableLoading"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :isShowPage="true"
            >
              <template slot-scope="scope" slot="openInfo">
                <span @click="handleOpenList(scope.row)">{{scope.row.openInfo}}</span>
              </template>
              <!-- 操作按钮 -->
              <el-table-column
                fixed="right"
                slot="actionMenu"
                label="操作"
                align="center"
                header-align="center"
                width="200"
              >
                <template slot-scope="scope" >
                  <div class="operation">
                      <span @click="handEdit(scope.row)">编辑</span>
                      <span @click="handDel(scope.row)">删除</span>
                      <!-- <span @click="resetDel(scope.row)">重置密码</span> -->
                  </div>
                  <!-- <el-button type="text" size="small" @click="handleReset(scope.row)" v-hasPermission="permission.edit">密码重置</el-button> -->
                </template>
              </el-table-column>
            </cvue-table>
          </div>
        </el-card>
        <!-- 创建 -->
        <add-list
        v-if="dialogVisibleAdd"
        @closeDialog="closeDialog('add')"
        @confirmDialog="confirmDialog('add')"
        @handleClose="closeDialog('add')"
        :dialogVisible="dialogVisibleAdd"
        ></add-list> 
        <edit-list 
        @closeDialog="closeDialog('edit')"
        @confirmDialog="confirmDialog('edit')"
        @handleClose="closeDialog('edit')"
        :dialogVisible="dialogVisibleEdit"
        ></edit-list>
    </div>
</template>
<script>
import cvueTable from '@/components/cvue-table'
import addList from './addList'
import editList from './editList'
import areaComponent from '@/components/areaComponent'
import {baseUrl} from '@/config/config'
export default {
    name: 'schoolList',
    components: {
       cvueTable,
       addList,
       editList,
       areaComponent
    },
    data () {
      return {
        sheng: '',
        shi: '',
        qu: '',
        phaseStudyId: '',
        schoolName: '',
        stageData: [],
        dialogVisibleAdd: false,
        dialogVisibleEdit: false,
         tablePage: 1,
         tableLoading: false,
        page: {
            total: 0, // 总页数
            currentPage: 1, // 当前页数
            pageSize: 10, // 每页显示多少条
            pageSizes: [10, 20, 30, 40, 50]
        },
        tableOption: {
            stripe: true,
            width: '100%',
            border: true,
            index: false,
            cloumn: [
            { prop: 'name', label: '学校名称', align: 'center', width: 150 },
            { prop: 'stageName', label: '所属学段', align: 'center' },
            { prop: 'adress', label: '所属地区', align: 'center' },
            { prop: 'agentName', label: '代理商', align: 'center' },
            { prop: 'adminLogin', label: '校管总账号', align: 'center' }
            ]
        },
        tableData: [],
        areaData: '',
        areaId: '',
        // 学校办学类型 ： SchoolType
        // 附设班类型 ：AttachedClassType
        // 小学学制 ： PsSchoolingLength
        // 初中学制 ： JhsSchoolingLength
        // 高中学制： ShsSchoolingLength
        // 土地产权类型： LandPropertyRightType
        // 寄宿制形式：BoardingType
        // 学校举办者类型 ： SchoolRunnerType
        dict: {
            SchoolType: [],
            AttachedClassType: [],
            PsSchoolingLength: [],
            JhsSchoolingLength: [],
            ShsSchoolingLength: [],
            LandPropertyRightType: [],
            BoardingType: [],
            SchoolRunnerType: []
        }
      }
    },
    mounted () {
      this.getSchoolList()
        this.getStage()
        this.getZidian()
        // this.getSubject()
        this.getGrades()
        this.getSchoolYear()
        this.getAgents()
    },
    methods: {
            // 改变pagesize
        handleSizeChange (val) {
        this.page.pageSize = val
        this.getSchoolList()
        },
        // 改变页码
        handleCurrentChange (val) {
        this.tablePage = val
        this.getSchoolList()
        },
        // 获取地区的数据
        areaObj (data) {
          this.areaData = data
        },
         // 获取学段
        getStage () {
          var params = {
            // id: this.$store.state.common.cookiesObj.schoolId,
            PageNum: 1,
            PageSize: 100,
            Sorting: 'orderNum ASC'
          }
          this.$store.dispatch('schoolManage/Stage', params).then(res => {
              this.stageData = res.items
              this.$store.state.schoolManage.stageData = res.items
          })
        },
        // 获取学年
        getSchoolYear () {
          var params = {
            // id: this.$store.state.common.cookiesObj.schoolId,
            PageNum: 1,
            PageSize: 100,
            Sorting: 'name DESC'
          }
          this.$store.dispatch('schoolManage/SchoolYear', params).then(res => {
              this.$store.state.schoolManage.schoolYearData = res.items
          })
        },
        // 获取代理商
        getAgents () {
          this.$store.dispatch('schoolManage/Agents').then(res => {
              this.$store.state.schoolManage.agentData = res
          })
        },
        // 获取字典数据
       async getZidian () {
          for (var obj in this.dict) {
            var params = {
                typeCode: obj
              }
            var dictItem = await this.$store.dispatch('schoolManage/Dictionaryvalue', params)
            // console.log(dictItem)
           this.dict[obj] = dictItem
           this.$store.state.schoolManage.dict = this.dict
          }
        },
        // 获取年级
        getGrades () {
          var params = {
            // schoolId: this.$store.state.common.cookiesObj.schoolId
            Sorting: 'orderNum ASC'
          }
          this.$store.dispatch('schoolManage/GradesBySchoolId', params).then(res => {
              this.$store.state.schoolManage.gradeData = res.items
          })
        },
        // 搜索按钮
        searchList (num) {
          // if (!this.areaData.provinceId) {
          //   this.$message({
          //       type: 'error',
          //       message: '请选择省'
          //     }) 
          //   return
          // }
        //   if (!this.areaData.cityId && this.areaData.isZhi) {
        //     this.$message({
        //         type: 'error',
        //         message: '请选择省市区'
        //       }) 
        //     return
        //   }
        //  if (!this.areaData.countyId && !this.areaData.isZhi) {
        //     this.$message({
        //         type: 'error',
        //         message: '请选择省市区'
        //       }) 
        //     return
        //   }
          //  if (!this.phaseStudyId) {
          //   this.$message({
          //       type: 'error',
          //       message: '请选择学段'
          //     }) 
          //   return
          // }
          // if (this.areaData.countyId) {
          //     this.areaId = this.areaData.countyId
          //  } else {
          //    this.areaId = this.areaData.cityId
          //  }
          if (this.areaData.countyId) {
              this.areaId = this.areaData.countyId
           } else if (this.areaData.cityId) {
              this.areaId = this.areaData.cityId
           } else {
             this.areaId = this.areaData.provinceId
           }
           if (num == 1) {
            this.tablePage = 1
            this.getSchoolList() 
           } else {
             this.exportList()
           }
        },
        // 导出列表
        exportList () {
           var params = {
              // PageNum: this.tablePage,
              // PageSize: this.page.pageSize,
              // AreaId: this.areaId,
              // StageId: this.phaseStudyId
            }
            if (this.areaId) {
              params.AreaId = this.areaId
            }
            if (this.phaseStudyId) {
              params.StageId = this.phaseStudyId
            }
          var str = '?'
            for (let key in params) {
                str += key + '=' + params[key] + '&'
            }
            str = str.substring(0, str.length - 1)
            let url = baseUrl + '/bdc/api/app/school/exportSchoolList' + str
            window.open(url)
        },
         // 关闭弹窗
        closeDialog (params) {
            if (params == 'add') {
                this.dialogVisibleAdd = false
            }
            if (params == 'edit') {
                this.dialogVisibleEdit = false
            }
        },
        // 确认
        confirmDialog (params) {
            if (params == 'add') {
                this.dialogVisibleAdd = false
                // this.keyword = ''
                this.tablePage = 1
                this.getSchoolList()
            }
            if (params == 'edit') {
                this.dialogVisibleEdit = false
                // this.keyword = ''
                this.tablePage = 1
                this.getSchoolList()
            }
        },
        // 新增
        handleAdd () {
            this.dialogVisibleAdd = true
        },
        // 编辑
        handEdit (row) {
            this.dialogVisibleEdit = true
            this.$store.state.schoolManage.schoolId = row.id
            // console.log(row)
        },
        // 删除
        handDel (row) {
            this.$confirm('此操作将永久删除该学校, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.delSchoolItem(row)
              // this.$message({
              //   type: 'success',
              //   message: '删除成功!'
              // })
            }).catch(() => {
                      
            })
        },
        delSchoolItem (row) {
            this.$store.dispatch('schoolManage/DeleteSchool', row.id).then(res => {
                 this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                if (this.tableData.length == 1 && this.tablePage > 1) {
                      this.tablePage--
                  }
                  this.getSchoolList()
            })
        },
        // 获取学校列表
        getSchoolList () {
          // if (!this.areaId || !this.phaseStudyId) {
          //     return
          // }
           var params = {
              PageNum: this.tablePage,
              PageSize: this.page.pageSize,
              AreaId: this.areaId,
              StageId: this.phaseStudyId
            }
            if (this.schoolName) {
              params.SchoolName = this.schoolName
            }
           this.$store.dispatch('schoolManage/GetSchoolList', params).then(res => {
              // this.areaData = ''
              this.tableData = res.items
              this.page.total = res.totalCount
              this.page.currentPage = this.tablePage
          })   
        }
    }
}
</script>
<style scoped>
.right-main{
    margin-top: 15px;
    background: #fff;
    min-height: 150px;
    padding: 0 0 20px;
}
.operation span{
    cursor: pointer;
    color: #409EFF;
}
</style>
